<%@page pageEncoding="UTF-8" isELIgnored="false"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="f" uri="http://www.slim3.org/functions"%>
<%@ taglib prefix="m" uri="http://taglibs.mobylet.org/" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>なかまちず</title>
<c:import url="/jsp/pc/keyword.jsp"/>
<link rel="stylesheet" type="text/css" href="/css/global.css" />
<script type="text/javascript" src="http://maps.google.com/maps?hl=ja&amp;ie=UTF8&amp;file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAwbwiuCedEJUslW8T4WI_GhR3iK3crI4zpQP7okAttB0Co15sHBRRAJ9DF18KT1gHXBdPIF7iWSpmJQ" charset="utf-8"></script>
<style type="text/css">
  html { overflow: hidden; }
  html, body, td, th { font-family: Arial, sans-serif; margin: 0; padding: 0; height: 100%; font-size: 10pt; color: #333333; }
  #map { position: absolute; top: 30px; left: 10px; width: 600px; height: 450px;}
  #map img { cursor: crosshair; }
  img { border: 0px; }
  form { margin: 0; padding: 0; font-family: Arial, sans-serif; font-size: 10pt; }
  input, textarea { margin: 3px 0 0 0; padding: 0; font-family: Arial, sans-serif; font-size: 10pt; }
  #side_bar { position: absolute; top: 30px; left: 620px; border: 1px solid #666; padding: 5px; line-height: 1.8; overflow:auto; background: url(/icon/white70per.png); width: 100px; height: 438px; }
  #header { background-color: #ffffff; position:absolute; top: 6px; left: 10px; z-index: 99; width: 592px; padding: 2px 4px; overflow: hidden; }
</style>
</head>
<body onunload="GUnload()">
<!-- 
http://maps.google.co.jp/maps?hl=ja&ie=UTF8&ll=${f:h(centerLat)},${f:h(centerLng)}&spn=0.008581,0.020792&z=16&brcurrent=3,0x60185c0dece046d9:0xbd199dace57b6af,1
 -->
<div id="map">Loading...</div>

<div id="side_bar">Loading...</div>
<div id="header">クリックで新しいポイントを追加できます。 - <a href="/">トップページへ</a></div>
<script type="text/javascript">
//<![CDATA[
<%--
var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_purple.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);
--%>
var icon1;
if(!icon1){
	icon1 = new GIcon();
	icon1.image = "http://www.google.com/mapfiles/gadget/markerSmall80.png";
	icon1.shadow = "http://www.google.com/mapfiles/gadget/shadow50Small80.png";
	icon1.iconSize = new GSize(16, 27);
	icon1.shadowSize = new GSize(31, 27);
	icon1.iconAnchor = new GPoint(8, 27);
	icon1.infoWindowAnchor = new GPoint(8, 1);
}
if (GBrowserIsCompatible()) {
  var side_bar_html = "";
  var gmarkers = [];
  var i = 0;
  var editor = [];
  var map = new GMap2(document.getElementById("map"));
  var mapId;
  map.setUIToDefault();
  map.addControl(new GNavLabelControl(), new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(8, 29)));
  map.removeMapType(G_HYBRID_MAP);
  map.setCenter(new GLatLng(${f:h(centerLat)}, ${f:h(centerLng)}), 13);
  var markera;
  if(!markera){
  	markera = new GMarker(new GLatLng(0,0), {icon:icon1, draggable:true, hide:true});
  	map.addOverlay(markera);
  }


  function createMarker(point, id, name, comment, timestamp, ip) {
  
    var opt = new Object();
    var icon = new GIcon();
    var iconUrl = "/icon/red" + id + ".png";
    icon.image = iconUrl;
    icon.iconSize = new GSize(27,27);
    icon.iconAnchor = new GPoint(15,25);
    icon.infoWindowAnchor = new GPoint(25,5);
    icon.clickable = true;
    opt.icon = icon;
    opt.title = name;
    var marker = new GMarker(point, opt);

    var content = "<div><b>名前<\/b>　"+name+"<br \/><b>内容<\/b>　"+comment+"<br \/><b>日時<\/b>　"+timestamp+"<hr width='200px'/><\/div>";
    editor[i] = content +
           '<form name="editLandMarkForm" method="post" onsubmit="return checkout()" action="/edit">' +
           '<input type="hidden" name="id" value="'+id+'" />' +
           '<table><tr><td>' +
           '名前:&nbsp;<input name="name" type="text" size="16" value="'+name+'"/></td><td>&nbsp;</td></tr>' +
           '<tr><td>アイコン:&nbsp;' +
           '<select name="ico" onchange="editIconImage(this.options[this.selectedIndex].value,\'' + id + '\');"><option value="">選択してください</option><c:forEach items="${iconNameMap}" var="map"><option value="<c:out value="${map.key}"/>"/><c:out value="${map.value}"/></option></c:forEach></select>' +
           '</td><td rowspan="3" valign="top" id="iconSample' + id +'"></td></tr><tr><td>' +
           '内容:<br/><textarea name="comment" cols="19" rows="2">'+comment+'</textarea></td></tr>' +
           '<tr><td align="right"><input type="submit" value="編集" /></td></tr></table>' +
           '<\/form><hr width="200px"/>' +
           '<form name="delete" method="post" action="/delete">' +
           '<input type="hidden" name="id" value="'+id+'" />' +
           '削除する？&nbsp;<input type="submit" value="削除" />' +
           '<\/form>';
    content = content + "<a href='javascript:Cambio("+i+")'>編集<\/a>";
    GEvent.addListener(marker, "click", function() {
      marker.openInfoWindowHtml(content);
    });
    gmarkers[i] = marker;
    side_bar_html += '<a href="javascript:myclick(' + i + ')"><img src="'+iconUrl+'"/>' + name + '<\/a><br \/>';
    i++;
    return marker;
  }
  function Cambio(i) {
    gmarkers[i].openInfoWindowHtml(editor[i]);
  }
  function myclick(i) {
    GEvent.trigger(gmarkers[i], "click");
  }
  function setIconImage(iconName){
  	if(iconName){
  		var iconUrl = "/icon/landmark/"+iconName+".png";
  		document.getElementById('iconImageSample').innerHTML="<img src='"+iconUrl+"' style='float: left;'/>";
  	}else{
  		document.getElementById('iconImageSample').innerHTML="";
  	}
  }
  function editIconImage(iconName, id){
  	var elementId = "iconSample" + id;
  	if(iconName){
  		var iconUrl = "/icon/landmark/"+iconName+".png";
  		document.getElementById(elementId).innerHTML="<img src='"+iconUrl+"' style='float: left;'/>";
  	}else{
  		document.getElementById(elementId).innerHTML="";
  	}
  }
  function addMarker(markers, bounds){
  	if(!bounds){
  		bounds = new GLatLngBounds();
  	}
	for (var i = 0; i < markers.length; i++) {
		var lats = markers[i].getElementsByTagName("lat");
		var lngs = markers[i].getElementsByTagName("lng");
		var point = new GLatLng(parseFloat(GXml.value(lats[0])), parseFloat(GXml.value(lngs[0])));
		var ids = markers[i].getElementsByTagName("id");
		var id = GXml.value(ids[0]);
		var names = markers[i].getElementsByTagName("name");
		var name = GXml.value(names[0]);
		var comments = markers[i].getElementsByTagName("comment");
		var comment = GXml.value(comments[0]);
		var timestamps = markers[i].getElementsByTagName("timestamp");
		var timestamp = GXml.value(timestamps[0]);
		var ips = markers[i].getElementsByTagName("ip");
		var ip = GXml.value(ips[0]);
		var marker = createMarker(point, id, name, comment, timestamp, ip);
		map.addOverlay(marker);
		bounds.extend(point);
	}
	return bounds;
  }
  GDownloadUrl("/xml?"+Math.random(), function(data, responseCode) {
    if(responseCode == 200) {
      var xml = GXml.parse(data);
      var keys = xml.documentElement.getElementsByTagName("key");
      mapId = GXml.value(keys[0]);
      var members = xml.documentElement.getElementsByTagName("member");
      var bounds = addMarker(members, null);
      var landmarks = xml.documentElement.getElementsByTagName("landmark");
      bounds = addMarker(landmarks, bounds);
      <%-- 
      for (var i = 0; i < markers.length; i++) {
        var lats = markers[i].getElementsByTagName("lat");
        var lngs = markers[i].getElementsByTagName("lng");
        var point = new GLatLng(parseFloat(GXml.value(lats[0])), parseFloat(GXml.value(lngs[0])));
        var ids = markers[i].getElementsByTagName("id");
        var id = GXml.value(ids[0]);
        var names = markers[i].getElementsByTagName("name");
        var name = GXml.value(names[0]);
        var comments = markers[i].getElementsByTagName("comment");
        var comment = GXml.value(comments[0]);
        var timestamps = markers[i].getElementsByTagName("timestamp");
        var timestamp = GXml.value(timestamps[0]);
        var ips = markers[i].getElementsByTagName("ip");
        var ip = GXml.value(ips[0]);
        var marker = createMarker(point, id, name, comment, timestamp, ip);
        map.addOverlay(marker);
        bounds.extend(point);
      }
      --%>
      if(landmarks.length > 0 || members.length > 0){
      	map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
      }
      document.getElementById("side_bar").innerHTML = side_bar_html;
    } else if (responseCode == -1) {
      alert("Data request timed out. Please try later.");
    } else {
      alert("IOException. Check XML file.");
    }
  });
  GEvent.addListener(map, "click", function(overlay, latlng) {
    if (latlng) {
      <%-- markera = new GMarker(latlng, {icon: icon1, draggable:true});  --%>
      markera.setLatLng(latlng);
      markera.show();
      GEvent.addListener(markera, "click", function() {
        var latlng = markera.getLatLng();
        var lat = latlng.lat();
        var lng = latlng.lng();
        var html = "<form name='addLandMarkForm' method='post' onsubmit='return check()' action='/add'><input type='hidden' name='lat' value='"+lat+"'/><input type='hidden' name='lng' value='"+lng+"'/><table><tr><td><b>名前:<\/b>&nbsp;<input name='name' type='text' size='16'\/><\/td><td>&nbsp;<\/td><\/tr><tr><td><b>アイコン:<\/b>&nbsp;<select name='ico' onchange='setIconImage(this.options[this.selectedIndex].value" + ");'><option value=''>選択してください<\/option><c:forEach items="${iconNameMap}" var="map"><option value='<c:out value="${map.key}"/>'\/><c:out value="${map.value}"/><\/option></c:forEach><\/select><\/td><td rowspan='3' id='iconImageSample' valign='top'><\/td><\/tr><tr><td><b>内容:<\/b><br\/><textarea name='comment' cols='19' rows='2' wrap='VIRTUAL'><\/textarea><\/td><\/tr><tr><td><div align='right'><input type='hidden' value='"+mapId+"'\/><input type='submit' value='追加'\/><\/div><\/td><\/tr><\/table><\/form>";
        markera.openInfoWindow(html);
      });
      //map.addOverlay(markera);
    }
  });
}


function check() {
  if (document.addLandMarkForm.name.value == "") {
    alert("名前を入力してください。");
    document.addLandMarkForm.name.focus();
    return false;
  }
  if (document.addLandMarkForm.name.value.length > 10) {
    alert("名前を10文字以内で入力してください。");
    document.addLandMarkForm.name.focus();
    return false;
  }
  if (document.addLandMarkForm.comment.value == "") {
    alert("内容を入力してください。");
    document.addLandMarkForm.comment.focus();
    return false;
  }
  if (document.addLandMarkForm.comment.value.length > 30) {
    alert("内容を30文字以内で入力してください。");
    document.addLandMarkForm.comment.focus();
    return false;
  }
  if (document.addLandMarkForm.ico.value == "") {
    alert("アイコンを選択してください。");
    document.addLandMarkForm.comment.focus();
    return false;
  }
  return true;
}

function checkout() {
  if (document.editLandMarkForm.name.value == "") {
    alert("名前を入力してください。");
    document.editLandMarkForm.name.focus();
    return false;
  }
  if (document.editLandMarkForm.name.value.length > 10) {
    alert("名前を10文字以内で入力してください。");
    document.editLandMarkForm.name.focus();
    return false;
  }
  if (document.editLandMarkForm.comment.value == "") {
    alert("内容を入力してください。");
    document.editLandMarkForm.comment.focus();
    return false;
  }
  if (document.editLandMarkForm.comment.value.length > 30) {
    alert("内容を30文字以内で入力してください。");
    document.editLandMarkForm.comment.focus();
    return false;
  }
  if (document.editLandMarkForm.ico.value == "") {
    alert("アイコンを選択してください。");
    document.editLandMarkForm.ico.focus();
    return false;
  }
  return true;
}

function htmlEscape(str){
  var div = document.createElement('div');
  var text =  document.createTextNode('');
  div.appendChild(text);
  text.data = str;
  return div.innerHTML;
}

//]]>
</script>



<%-- 
<div id="map_canvas" style="width: ${f:h(width)}px; height: ${f:h(height)}px"></div>


<script type="text/javascript">

  function initialize() {
    var map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(35.465616, 139.622197), 13);
    map.addControl(new GSmallMapControl());
 
    // Add 10 markers to the map at random locations
    var bounds = map.getBounds();
    var southWest = bounds.getSouthWest();
    var northEast = bounds.getNorthEast();
    var lngSpan = northEast.lng() - southWest.lng();
    var latSpan = northEast.lat() - southWest.lat();
    var max = 10;
  
    for (var i = 1; i <= max; i++) {
      var text = "迷ったー" + i;
      var title = i + "番目";
      var lat = southWest.lat() + latSpan * Math.random();
      var lng = southWest.lng() + lngSpan * Math.random();
      addMarker(map, new GLatLng(lat, lng), title, text, i);
    }

  
  }
  
  function addMarker(map, point, title, text, num){
    var opt = new Object();
    var icon = new GIcon();
    icon.image = "/icon/red" + ("0" + num).slice(-2) + ".png";
    icon.iconSize = new GSize(27,27);
    icon.iconAnchor = new GPoint(15,25);
    icon.infoWindowAnchor = new GPoint(25,5);
    icon.clickable = true;
    opt.icon = icon;
    opt.title = title;
    var marker = new GMarker(point, opt);
    GEvent.addListener(marker, "click", function(){
      marker.openInfoWindowHtml(text);
    });
    map.addOverlay(marker);
    return marker;
  }

</script>

 --%>

<c:import url="/jsp/pc/analytics.jsp"/>
</body>
</html>